<template>
    <div :class="classObj" @click="handleScrollTop">
        <!-- <div class="scroll-top show"> -->
        <i class="el-icon-caret-top"></i>
    </div>
</template>
<script>
export default {
    name: 'ScrollTop',
    data() {
        return {
            isShow: false,
            timer: null
        }
    },
    computed: {
        classObj() {
            return {
                'scroll-top': true,
                'show': this.isShow,
            }
        },
    },
    created() {},
    mounted() {
        this.$nextTick(() => {
            window.mainRef.addEventListener('scroll', this.scroll)
        })
    },
    methods: {
        scroll(event) {
            if (this.timer) {
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                this.$data.isShow = event.target.scrollTop > 400
                this.timer = null
            }, 500)
        },
        handleScrollTop() {
            window.mainRef.scrollTo({top: 0, behavior: 'smooth'})
        }
    },
    beforeDestroy() {
        window.mainRef.removeEventListener('scroll', this.scroll)
    }
}
</script>
<style lang="scss" scoped>
$size: 40px;
.scroll-top {
    position: fixed;
    bottom: 16%;
    right: calc(#{0 - $size});
    width: $size;
    height: $size;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: $size;
    background-color: #fff;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.4);
    cursor: pointer;
    // transform: translateX(100%);
    transition: right 0.5s ease;
}
.show {
    right: $size;
}
</style>
